<!DOCTYPE html>
<html>
    <head>
        {% block head %}
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Model-Builder</title>
		<style type="text/css" title="currentStyle">
			@import "js/media/css/demo_page.css";
			@import "js/media/css/demo_table.css";
		</style>


        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone%20Kaffeesatz|OFL%20Sorts%20Mill%20Goudy%20TT|Molengo&key=769622cSDqbwL9qEhUFg">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="js/jquery-1.4.2.min.js"></script>
        <script src="js/modernizr-1.5.min.js"></script>
		<script type="text/javascript" language="JavaScript" src="js/media/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				if ({{localized}}==0){
					get_location()
					}
				$('.datatable').dataTable()
			} )
		</script>
        <script type="text/javascript">
            $("#Login").click(function(){
                $("#LoginLinks").slideToggle("slow");
            });
        </script>
        {%  endblock %}
    </head>
    <body class="web20">
        <div id="wrapper">
            <header class="title">
                <h1>Model-Builder 
                    <br/>
                    Cloud Community
                </h1>
                <hgroup>
                </hgroup>
            </header>
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/library">Model Library</a>
                    </li>
                    <li>
                        <a href="/about">About</a>
                    </li>
                    <li>
                        <a href="mailto:fccoelho@cuboc3.com">Contact</a>
                    </li>
                    {%if logged_in %}
                    <li>
                        <a href="/profile">Your Profile</a>
                    </li>
                    {% endif %}
                    {%if logged_in %}
                    <li>
                        <a id="Login" title="welcome." href="{{ url }}">{{ url_linktext }}</a>
                    </li>
                    {%else%}
                    <li>
                        <a title="welcome." href="#" onclick='$("#LoginLinks").slideToggle("slow")'>{{ url_linktext }}</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            <br/>
            <br/>
            <div id="LoginLinks" style="display:none;">
                <header>
                    <h3>Login with your preferred OpenID provider:</h3>
                </header>
                <table width="100%" border="0">
                    <tr>
                    	{%for p in providers %}
                        <td><a href="{{p.0}}" /><img src="{{p.1}}" alt="{{p.1}}" width=120px/></a>
                        </td>
						{%endfor %}
                    </tr>
                </table>
            </div>
            <br/>
            <section>
                {% block content %}
                <article>
                    <div class="text1">
                        <header>
                            <hgroup>
                                <h1>Welcome to our Cloud Community</h1>
                                <h3>Share your models and take advice from your peers!</h3>
                            </hgroup>
                        </header>
                        <p>
                            If you use Model-Builder for your research or teaching, how about publish your models on the web so that your peers can see your work and comment on it?
                        </p>
                        <p>
                            On our cloud community, you decide who can view your work by inviting them to share. Or, if you prefer, you can make your work public, so that anyone can see how cool it is!
                        </p>
                        <!-- <p>Aliquam erat volutpat. Donec libero arcu,tempor non consectetur nec, placerat ut sapien.
                        Ut adipiscing scelerisque interdum. Aliquam dolor metus, consequat eu facilisis in,
                        gravida ut eros. Fusce convallis <a href="http://www.example.com">external link</a> semper aliquam. Class aptent taciti sociosqu ad litora
                        torquent per conubia nostra, per inceptos himenaeos. Donec ac leo eget lorem fermentum sodales
                        id nec neque. Nam euismod justo ac augue sodales ac consectetur nisl volutpat. Nulla vel erat
                        felis, at molestie risus. Nunc ut nibh magna.</p> -->
                    </div>
                </article>
                {% endblock %}
            </section>
            <footer>
                {% block footer %}
                <p>
                    Copyright 2010 <a href="http://www.cuboc3.com">Cubo Computação Científica</a>
                </p>
                {% endblock %}
            </footer>
        </div>
    </body>
    <script type="text/javascript">
        function store_pos(position){
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            // upload coordinates to server
            data = {
                "lat": latitude,
                "lon": longitude
            }
            $.post('/setlocation', data)
        }
        
        function get_location(){
            if (Modernizr.geolocation) {
				//alert('getting position')
                navigator.geolocation.getCurrentPosition(store_pos);
            }
            else {
                // no native support; maybe try Gears?
            }
        }
        
        
        
        function handle_error(err){
            if (err.code == 1) {
                // alert('user said no!')
            }
            else 
                if (err.code == 2) {
                //alert('Position unavailable!')
                }
                else 
                    if (err.code == 3) {
                    //alert('timeout')
                    }
                    else 
                        if (err.code == 0) {
                        //alert('unknown error!')
                        }
        }
    </script>
</html>
